<template>
	<view class="container">
		<form>
			<view class="form-item">
				<label>姓名</label>
				<input v-model="formData.name" placeholder="请输入姓名" />
			</view>
			<view class="form-item">
				<label>密码</label>
				<input v-model="formData.password" type="password" placeholder="请输入密码" />
			</view>
			<view class="form-item">
				<label>性别</label>
				<picker :v-model="formData.gender" :range="genderOptions" @change="onGenderChange">
					<view class="picker">
						{{ formData.gender || '请选择性别' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<label>职业</label>
				<picker :v-model="formData.occupation" :range="occupationOptions" @change="onOccupationChange">
					<view class="picker">
						{{ formData.occupation || '请选择职业' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<label>年龄</label>
				<input v-model="formData.age" type="number" placeholder="请输入年龄" />
			</view>
			<view class="form-item">
				<label>地区</label>
				<picker mode="region" v-model="formData.address" @change="onRegionChange">
					<view class="picker">
						{{ formData.address.length > 0? formData.address.join(' ') : '请选择地区' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<label>手机号</label>
				<input v-model="formData.phoneNumber" type="tel" placeholder="请输入手机号" />
			</view>
			<button type="submit" @click="submitForm">设置</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					password: '',
					gender: '',
					occupation: '',
					age: '',
					address: [],
					phoneNumber: '',
					openId: ''
				},
				genderOptions: ['男', '女'],
				occupationOptions: [' 农、林、牧、渔业 ', ' 采矿业 ', ' 制造业 ', ' 电力、热力、燃气及水生产和供应业 ', ' 建筑业 ', ' 批发和零售业 ',
					' 交通运输、仓储和邮政业 ', ' 住宿和餐饮业 ', ' 信息传输、软件和信息技术服务业 ', ' 金融业 ', ' 房地产业 ', ' 租赁和商务服务业 ', ' 科学研究和技术服务业 ',
					' 水利、环境和公共设施管理业 ', ' 居民服务、修理和其他服务业 ', ' 教育 ', ' 卫生和社会工作 ', ' 文化、体育和娱乐业 ', ' 公共管理、社会保障和社会组织 ',
					' 国际组织 ', ' 学生 ', ' 其他 '
				]
			};
		},
		mounted() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo && userInfo.address && typeof userInfo.address === 'string') {
				userInfo.address = userInfo.address.split(',');
			}
			this.formData = userInfo;
			this.formData.password = ''
		},
		methods: {
			onGenderChange(e) {
				this.formData.gender = this.genderOptions[e.detail.value];
			},
			onOccupationChange(e) {
				this.formData.occupation = this.occupationOptions[e.detail.value];
			},
			onRegionChange(e) {
				this.formData.region = e.detail.value;
				this.formData.address = e.detail.value;
				// 强制更新视图
				this.$forceUpdate();
			},
			submitForm() {
				if (!this.validateForm()) {
					return;
				}
				this.formData.address = this.formData.address.toString()
				uni.request({
					url: 'http://localhost:9090/user/setting',
					method: 'POST',
					data: this.formData,
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.setStorageSync('userInfo', res.data.data);
							uni.switchTab({
								url: '/pages/mine/index',
								success() {},
								fail(err) {}
							});
						} else {
							console.error('注册失败:', res.data);
						}
					},
					fail: (error) => {
						console.error('请求出错:', error);
					}
				});
			},
			validateForm() {
				if (!this.formData.name) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.password || this.formData.password.length < 8) {
					uni.showToast({
						title: '密码不能为空且长度至少为 8 位',
						icon: 'none'
					});
					return false;
				}
				return true;
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.form-item label {
		width: 80px;
		margin-right: 10px;
	}

	input,
	.picker {
		flex: 1;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	button {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	button:hover {
		background-color: #0056b3;
	}
</style>